<!--首页的热门讨论-->
<template>
  <div>
    <swiper class="swiper" circular="true" :vertical="true" :interval="5000" :duration="1000">
      <block v-for="(item,index) in info" :index="index" :key="item.id">
        <swiper-item class="swiper-item" @tap="toPage(item.id)">
            <img @error="errorImg(index)" :lazy-load="true" :src="item.cover ? picPre + item.cover : picPre + 'front/avatar.jpg'" alt="">
            <span class="title">热门</span>· <span class="info">{{item.name}}</span>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: "index",
    props: {
      info: {
        type: Array
      }
    },
    data(){
      let that = this;
      return{
        picPre: that.$api.picPre,
      }
    },
    methods:{
      errorImg(index){
        this.info[index].head_img = 'front/avatar.jpg'
      },
      toPage(id){
		  uni.navigateTo({
		  	url: "/social/groupDetails?id="+id
		  })
      }
    },
    computed: {
      ...mapState([
        'isLogin'
      ])
    },
  }
</script>

<style scoped>
img{
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  margin-top: 6rpx;
}
.swiper-item{
  display: flex;
}
.title{
  width: 190rpx;
  text-align: center;
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);

}
.info{
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
swiper{
  height: 60rpx;
  padding: 8rpx 28rpx;
  background: #EF5A56;
  box-shadow:0 7rpx 2rpx 0 rgba(255, 128, 131, 0.35);
  border-radius:20rpx;
  color: white;
  font-size:24rpx;
  margin-bottom: 12rpx;
  line-height:60rpx;
}
</style>
